<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>会员招募</title>
		<link rel="stylesheet" href="../style/huiyuanzhaomu.css" />
		
		<script src="../Resources/flexible.debug.js"></script>
		<script src="../Resources/flexible_css.debug.js"></script>
		<script src="../Resources/vue.js"></script>
		<script src="../Resources/jquery-3.2.0.js"></script>
	</head>
	<body>
		<header>
			<span id="back"><img src="../imges/qietu/jiantou.png"/></span>
			<span>会员招募</span>
		</header>
		<main id="main">
			<ul>
				<li>
					<p><img :src="imgs_1"/></p>
					<p><img :src="imgs_2"/></p>
				</li>
				<li>
					<h1>
						<span><img :src="imgs_3"/></span>
						<span>{{font_1}}</span>
					</h1>
					<span class="span_1">{{font_2}}</span>
					<span class="span_2">{{font_3}}</span>
				</li>
				<li>
					<h1>
						<span><img :src="imgs_4"/></span>
						<span>{{font_4}}</span>
					</h1>
					<span class="span_1">{{font_5}}</span>
					<span class="span_2">{{font_6}}</span>
				</li>
				<li>
					<h1>
						<span><img :src="imgs_5"/></span>
						<span>{{font_7}}</span>
					</h1>
					<span class="span_1">{{font_8}}</span>
					<span class="span_2">{{font_9}}</span>
				</li>
			</ul>
			
			
			
		</main>
		
		<footer id="btn">
			<p>10元申请成为堆糖商店会员 ></p>
		</footer>
		<em class="flex">
			
		
		<section class="kuang">
			<ul>
				<li>
					<span></span>
					<span>选择支付方式</span>
					<span id="ioiot">x</span>
				</li>
				<li>
					<span><img src="../imges/qietu/weixing.png"/></span>
					<span>支付宝</span>
					<span><img class="qiehuan" src="../imges/qietu/bai.png"/></span>
				</li>
				<li>
					<span><img src="../imges/qietu/zhifubao.png"/></span>
					<span>微信支付</span>
					
					
					<span><img class="qiehuan" src="../imges/qietu/bai.png"/></span>
				</li>
				<li><button id="zf">支付方式</button></li>
				
			</ul>
			
			
		</section>
		
		</em>
		
		
		<script>
		$("#back").click(function(){
			location.href = "shoping.html"
		})
			$("#btn").click(function(){
				$(".flex").fadeIn(300)
			})
			$("#ioiot").click(function(){
				$(".flex").fadeOut(300)
			});
			$("#zf").click(function(){
				//alert(1)
			})
			var qiehuan = document.getElementsByClassName("qiehuan");
			//var flag = true;
			for (var i =0;i<qiehuan.length;i++) {
				 qiehuan[i].index = i
				qiehuan[i].onclick = function(){
				//alert(1)
				//if(flag){
					
					for (var j=0;j<qiehuan.length;j++) {
						qiehuan[j].src = "../imges/qietu/bai.png";
					}
					qiehuan[this.index].src = "../imges/qietu/hong.png";
					
					//flag=false
				//}else{
					//this.src = "../imges/qietu/bai.png";
					//flag=true
				//}
				
			}
			}
			
			console.log(qiehuan)
			$("body").on("click",".flex",function(e){
			var hright = 	$(this).height();
			var kuang = $(".kuang").height();
			var curr = hright-kuang;
			//console.log(hright,kuang,curr)
			var x = e.clientX;
			var y = e.clientY;
			//console.log(x,y)
			if(y<=curr){
				$(".flex").fadeOut(300)
			}
			})
			
			
			
			
			
			
			
			var v = new Vue({
        		el:"#main",
        		data:{
        			imgs_1:"../imges/qietu/huiyuan_1.png",
        			imgs_2:"../imges/qietu/huiyuan.png",
        			imgs_3:"../imges/qietu/huiyuan_3.png",
        			font_1:"专享折扣",
        			font_2:"以会员价购买每日会员折扣商品，",
        			font_3:"优先购买限量特价商品；",
        			imgs_4:"../imges/qietu/huiyuan_4.png",
        			font_4:"新手福袋",
        			font_5:"成为会员立即获得60元专享福袋礼包，",
        			font_6:"支付宝 福袋内容立即生效；",
        			imgs_5:"../imges/qietu/huiyuan_5.png",
        			font_7:"成长激活",
        			font_8:"回溯历史消费金额，计入成长值，",
        			font_9:"微信支付享受极速会员进阶； "
        		}
        	})
		</script>
		
	</body>
</html>
